<template>
  <div class="custom-manage">
    <el-card>
      <h3>
        入住办理
        <!-- <el-button type="primary" icon="el-icon-search" size="small" circle @click="search"></el-button> -->
        <el-input v-model="searchNumber" placeholder="用户手机号" style="width: 160px; margin-right: 10px;float: right;margin: 10px;"></el-input>
      </h3>
      <el-table style="width: 100%" :data="filteredUsers" border
        :cell-style="cellStyle">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" type="index" :index="indexMethod" width="80"></el-table-column>
        <el-table-column prop="roomNumber" label="房间号" width="70"> </el-table-column>
        <el-table-column prop="imgUrl" label="用户头像" width="120">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl" alt="" style="width: 100%;height: 50px;">
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="姓名" width="120"> </el-table-column>
        <el-table-column prop="vipType" label="vip等级" width="120"> </el-table-column>
        <el-table-column prop="telephone" label="手机号码" width="120"> </el-table-column>
        <el-table-column prop="sex" label="性别" width="80"> </el-table-column>
        <el-table-column prop="durationDay" label="入住天数" width="80"> </el-table-column>
        <el-table-column prop="checkInTime" label="下单日期" width="180"> </el-table-column>
        <el-table-column prop="status" label="状态" width="80"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-edit" circle
              @click="editUser(scope.row.orderId, scope.row.idCard, scope.row.status)"></el-button>
            <!-- <el-button type="danger" size="small" circle icon="el-icon-delete"
              @click="deleteUser(scope.row.orderId)"></el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { guestsForOrderStatus, userVipVipId } from '@/api/user'
import { deleteOrder, updateUserStateOrder } from '@/api/order'

export default {
  name: 'CustomManage',
  data() {
    return {
      searchNumber: '',
      currentPage: 1, //当前页
      total: 0, //总条数
      pageSize: 5, //当前页容量
      pageSizes: [],
      userList: []
    }
  },
  computed: {
    filteredUsers() {
      return this.userList.filter(user => {
        return !this.searchNumber || user.telephone.includes(this.searchNumber)
      }).slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
  },
  created() {
    for (let i = 0; i < 5; i++) {
      this.pageSizes.push(5 * (i + 1))
    }
    this.fetchData()
  },
  methods: {
    //切换每页条数容量
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.fetchData();
    },
    //切换当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },
    fetchData() {
      guestsForOrderStatus().then(res => {
        this.userList = res
        this.total = res.length
        for (let i = 0; i < this.userList.length; i++) {
          const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }
          // this.userList[i].imgUrl = process.env.VUE_APP_IMG_PREFIX + this.userList[i].imgUrl
          this.userList[i].checkInTime = new Date(this.userList[i].checkInTime).toLocaleDateString(undefined, options)
        }
      })
    },
    async editUser(orderId, idCard, status) {
      // 编辑用户逻辑
      console.log('编辑用户:', orderId);
      this.$prompt('请输入顾客身份证', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: '邮箱格式不正确'
      }).then(async ({ value }) => {
        if (idCard === value) {
          let userState = ''
          console.warn("state")
          console.warn(status)
          if (status === '已入住') {
            userState = '已完成'
          } else if (status === '已支付') {
            userState = '已入住'
          } else {
            userState = '已支付'
          }
          // userState = status === '已入住' ? '已入住' : '已完成'
          // userState = status === '已支付' ? '已支付' : '已入住'
          console.warn("userState")
          console.warn(userState)
          await updateUserStateOrder(orderId, userState);
          this.fetchData()
          this.$message({
            type: 'success',
            message: '办理成功!'
          })
        } else {
          this.$message({
            type: 'success',
            message: '身份证错误!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
      // 这里可以打开一个编辑对话框，或者跳转到编辑页面
    },
    deleteUser(orderId) {
      // 删除用户逻辑

      // this.userList = this.userList.filter(item => item.id !== user.id);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteOrder(orderId).then(res => {
            this.fetchData()
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'vipType') {
        switch (row.vipType) {
          case '黄金':
            return { color: '#FFD700', fontWeight: 'bold' }; // 金色
          case '白银':
            return { color: '#C0C0C0', fontWeight: 'bold' }; // 银色
          case '青铜':
            return { color: '#CD7F32', fontWeight: 'bold' }; // 铜色
          case '铂金':
            return { color: '#008899', fontWeight: 'bold' }; // 铂金色
          case '钻石':
            return { color: '#0094c8', fontWeight: 'bold' }; // 钻石色
          default:
            return {};
        }
      }
      return {};
    },
    search() {
      this.$prompt('请输入电话号搜索', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        for (let i = 0; i < this.userList.length; i++) {
          if (this.userList[i].telephone === value) {
            this.$message({
              type: 'success',
              message: '搜索到该用户'
            })
            this.userList = [this.userList[i]]
            return
          }
        }
        this.$message({
          type: 'error',
          message: '没有搜索到该用户'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    }
  }
}

</script>

<style lang="less" scoped>
.custom-manage {
  display: flex;
  justify-content: center;
}

.el-card {
  display: flex;
  flex-direction: column;
  width: 94%;
  margin: 20px 0;

  h3 {
    position: relative;
    height: 35px;

    .el-button {
      position: absolute;
      right: 10px;
      top: 5;
    }
  }

  .el-table {
    width: 100%;
    text-align: center;

    .el-table-column {
      text-align: center;
    }
  }
}

.el-pagination {
  margin: 10px 0 10px 300px;
}
</style>
